<template>
  <view class="post-create-container">
    <!-- 分类选择 -->
    <view class="form-card">
      <view class="card-title"
        >分类
        <text class="required">*</text>
      </view>
      <view class="category-tags">
        <u-tag
          v-for="(item, index) in categories"
          plain
          :key="index"
          :text="item.name"
          :mode="formData.tags === item.value ? 'dark' : 'plain'"
          :color="formData.tags === item.value ? '#fff' : '#606266'"
          :bgColor="formData.tags === item.value ? '#4db366' : '#fff'"
          :borderColor="formData.tags === item.value ? '#4db366' : '#333'"
          size="medium"
          shape="circle"
          @click="selectCategory(item.value)"
          class="tag-item"
        />
      </view>
    </view>

    <!-- 标题输入 -->
    <view class="form-card">
      <view class="card-title"
        >标题
        <text class="required">*</text>
      </view>
      <u--input
        v-model="formData.title"
        placeholder="请输入标题（最多30个字）"
        maxlength="30"
        border="none"
        :custom-style="{ padding: '20rpx 0' }"
      />
      <view class="input-counter">{{ formData.title.length }}/30</view>
      <text class="error-tip" v-if="errors.title">{{ errors.title }}</text>
    </view>

    <!-- 内容输入 -->
    <view class="form-card">
      <view class="card-title"
        >内容
        <text class="required">*</text>
      </view>
      <u--textarea
        v-model="formData.content"
        placeholder="请输入帖子内容（最多2000字）"
        maxlength="2000"
        height="300"
        count
        auto-height
        border="none"
      />
      <text class="error-tip" v-if="errors.content">{{ errors.content }}</text>
    </view>

    <!-- 图片上传 -->
    <view class="form-card">
      <view class="card-title">图片（1张）</view>
      <image
        v-show="formData.images"
        @tap="changeAvatar"
        :src="formData.images"
        mode="aspectFill"
      />
      <image
        v-show="!formData.images"
        @tap="changeAvatar"
        src="/static/icon/addPhoto.svg"
        mode="aspectFill"
      />
    </view>

    <!-- 底部按钮 -->
    <view class="footer-buttons">
      <u-button
        type="default"
        shape="circle"
        @click="handleCancel"
        class="cancel-btn"
        >取消
      </u-button>
      <u-button
        type="success"
        shape="circle"
        @click="handleSubmit"
        class="submit-btn"
        iconColor="#4db366"
        >发布
      </u-button>
    </view>
  </view>
</template>

<script>
import { upLoadImage_API, addFourm_API } from "../../api/forum";

export default {
  data() {
    return {
      categories: [
        { name: "经验分享", value: "经验分享" },
        { name: "问题咨询", value: "问题咨询" },
        { name: "药膳食谱", value: "药膳食谱" },
        { name: "重要材料", value: "重要材料" },
        { name: "其他", value: "其他" },
      ],
      // 表单信息
      formData: {
        postId: 0, //帖子Id
        tags: "", // 标签
        title: "", // 标题
        content: "", //内容
        images: "", //图片
      },
      // 错误信息
      errors: {
        tags: "", // 标签
        title: "", // 标题
        content: "", //内容
        images: "", //图片
      },
    };
  },
  methods: {
    // 选择分类
    selectCategory(value) {
      this.formData.tags = value;
    },

    // 新增图片
    async changeAvatar() {
      const result = await uni.chooseImage({
        count: 1, // 只能选择一张图片
      });
      let imgResult = result[1];
      const tempFilePath = imgResult.tempFilePaths[0];
      const res = await uni.uploadFile({
        url: "http://3790wz6pj968.vicp.fun/image_file/upload",
        filePath: tempFilePath,
        name: "file",
      });
      if (res[1] && res[1].data) {
        this.formData.images = JSON.parse(res[1].data);
      }
    },
    // 删除图片
    deleteImage(event) {
      this.formData.images = "";
    },

    // 表单验证
    validateForm() {
      let isValid = true;
      // 验证分类
      if (!this.formData.tags) {
        this.errors.category = "请选择分类";
        isValid = false;
      }

      // 验证标题
      if (!this.formData.title.trim()) {
        this.errors.title = "请输入标题";
        isValid = false;
      } else if (this.formData.title.length > 30) {
        this.errors.title = "标题不能超过30个字";
        isValid = false;
      }
      // 验证内容
      if (!this.formData.content.trim()) {
        this.errors.content = "请输入内容";
        isValid = false;
      } else if (this.formData.content.length > 2000) {
        this.errors.content = "内容不能超过2000字";
        isValid = false;
      }
      return isValid;
    },

    // 取消发布
    handleCancel() {
      uni.navigateBack();
    },

    // 提交表单
    async handleSubmit() {
      if (this.validateForm()) {
        await addFourm_API(this.formData);
        uni.showToast({
          title: "发布成功",
          icon: "success",
        });
        this.$to("/pages/forum/index", false, "tabbar");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.post-create-container {
  padding: 20rpx;
  padding-bottom: 120rpx;
  background-color: #f0f7e9;
}

.form-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  image {
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
  }

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;

    .required {
      color: #f56c6c;
      margin-left: 5rpx;
    }
  }
}

.category-tags {
  display: flex;
  flex-wrap: wrap;

  .tag-item {
    margin-right: 20rpx;
    margin-bottom: 20rpx;
  }
}

.input-counter {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.error-tip {
  display: block;
  color: #f56c6c;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.footer-buttons {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);

  .cancel-btn {
    flex: 1;
    margin-right: 20rpx;
  }

  .submit-btn {
    flex: 1;
  }
}
</style>
